import 'dart:ui';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:readmore/readmore.dart';
import 'package:travel/model/tourism.dart';
import 'package:travel/routes/index.dart';
import 'package:travel/screen/flutter_screenutil.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';

class ArticleController extends GetxController with WidgetsBindingObserver {
  late Rx<TourismModel> model;

  RxString search = ''.obs;

  RxDouble modalHeight = 410.0.obs;

  RxList<String> imgs = RxList([
    'https://img2.baidu.com/it/u=245754181,1374131537&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    'https://img1.baidu.com/it/u=3202574942,3916685509&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    'https://img1.baidu.com/it/u=2290351413,3535588738&fm=253&fmt=auto&app=138&f=JPEG?w=730&h=500',
    'https://img1.baidu.com/it/u=2290351413,3535588738&fm=253&fmt=auto&app=138&f=JPEG?w=730&h=500',
    'https://img1.baidu.com/it/u=3854644308,1226718554&fm=253&fmt=auto&app=138&f=JPEG?w=747&h=500'
  ]);

  RxList<String> avatars = RxList([
    'https://img2.baidu.com/it/u=1893304700,1248298429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    'https://img1.baidu.com/it/u=989635616,3648950491&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=3350495368,4002328331&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=338262016,1091407440&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=515',
    'https://img1.baidu.com/it/u=38051914,745056107&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=802',
    'https://img2.baidu.com/it/u=1085831496,2310981113&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  ]);

  RxDouble bottom = 0.0.obs;

  late TextEditingController editingController;

  @override
  void onInit() {
    super.onInit();
    editingController = ToolsUtils.editingController('');
    model = Rx(Get.arguments['model']);
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void onClose() {
    WidgetsBinding.instance.removeObserver(this);
    super.onClose();
  }

  @override
  void didChangeMetrics() {
    bottom.value = MediaQueryData.fromView(WidgetsBinding.instance.platformDispatcher.views.first)
        .viewInsets
        .bottom;
    bottom.refresh();
    super.didChangeMetrics();
  }
}

class ArticleView extends GetView<ArticleController> {
  const ArticleView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7),
          appBar: AppBar(
            automaticallyImplyLeading: true,
            leading: InkWell(
              onTap: () {
                Get.back();
              },
              child: Icon(
                Icons.arrow_back_ios,
                color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                size: 20.w,
              ),
            ),
            leadingWidth: 40.w,
            title: Align(
              alignment: Alignment.center,
              child: Text.rich(
                TextSpan(children: [
                  WidgetSpan(
                      child: CircleAvatar(
                        radius: 15.w,
                        backgroundImage: NetworkImage(controller.model.value.avatar),
                      ),
                      alignment: PlaceholderAlignment.middle),
                  TextSpan(
                      text: ' ${controller.model.value.nickname}',
                      style: StylesUtils.customTextStyle(
                          fontSize: 16.sp,
                          fontWeight: FontWeight.w700,
                          color: ColorsUtils.color3333))
                ]),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            actions: [
              Container(
                margin: EdgeInsets.only(right: 15.w),
                width: 70.w,
                height: 30.h,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15.h),
                    border: Border.all(
                        color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999))),
                child: Text.rich(TextSpan(
                  children: [
                    WidgetSpan(
                        alignment: PlaceholderAlignment.middle,
                        child: Icon(Icons.email_sharp,
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc))),
                    TextSpan(
                        text: '发私信',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color6666, fontSize: 12.sp),
                        recognizer: TapGestureRecognizer()
                          ..onTap = () {
                            Get.toNamed(RoutePath.messageLetter);
                          }),
                  ],
                )),
              )
            ],
          ),
          body: SingleChildScrollView(
            child: Column(
              children: [
                SizedBox(
                  height: 400,
                  child: Swiper.children(
                    pagination: SwiperPagination(
                        alignment: Alignment.bottomRight,
                        builder: FractionPaginationBuilder(
                            activeColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3478),
                            activeFontSize: 18.sp,
                            fontSize: 18.sp)),
                    control: SwiperControl(
                        color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3478)),
                    autoplay: true,
                    loop: true,
                    duration: 300,
                    autoplayDelay: 5000,
                    containerHeight: 400,
                    children: controller.imgs
                        .map((imgUrl) => CachedNetworkImage(
                            imageUrl: imgUrl,
                            alignment: Alignment.topLeft,
                            fit: BoxFit.cover,
                            errorWidget: (context, url, error) => const Icon(Icons.error),
                            placeholder: (
                              BuildContext context,
                              String url,
                            ) =>
                                CircularProgressIndicator(
                                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3478),
                                  strokeWidth: 2.w,
                                )))
                        .toList(),
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(left: 10.w, right: 10.w, top: 15.h),
                  child: Column(
                    children: [
                      Container(
                        height: 30.h,
                        alignment: Alignment.centerLeft,
                        child: Container(
                          alignment: Alignment.centerLeft,
                          padding: EdgeInsets.only(left: 5.w),
                          constraints: BoxConstraints.expand(width: 125.w, height: 30.h),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(15.h),
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2)),
                          child: Wrap(
                            spacing: 6.w,
                            alignment: WrapAlignment.start,
                            crossAxisAlignment: WrapCrossAlignment.center,
                            children: [
                              ToolsUtils.assetImageSvg('u1191.svg', width: 24.w, height: 24.h),
                              Text('故宫博物馆',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333, fontSize: 13.sp)),
                              Text('＞',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color6666, fontSize: 13.sp))
                            ],
                          ),
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(vertical: 15.w),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '别再瞎逛故宫了，去过100次的土著攻略',
                          style: StylesUtils.customTextStyle(
                              fontSize: 18.sp,
                              fontWeight: FontWeight.w700,
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Text.rich(
                          TextSpan(children: [
                            const TextSpan(text: '在帝都北京生活了这么多久了，每年还是总会去 '),
                            WidgetSpan(
                                child: ToolsUtils.assetImageSvg('u1198.svg',
                                    width: 15.w, height: 18.h)),
                            TextSpan(
                                text: ' 故宫 ',
                                style: StylesUtils.customTextStyle(
                                    fontSize: 17.sp, color: ColorsUtils.color3478)),
                            const TextSpan(text: ' 打卡好几次。')
                          ]),
                          style: StylesUtils.customTextStyle(
                              fontSize: 17.sp, color: ColorsUtils.color3333),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '春天的樱花雨~~~~夏天里的艳阳天~~~~秋日满地飘落的银杏~~~~冬天初雪那一天必须要去故宫许愿。',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: 17.sp),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '但是如果你没有来过北京，那真的可以好好把表姐这一篇看完，因为故宫真的太大了，如果没有人带着你或者不提前做好攻略，真的是迷路加分分钟走到哭。',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: 17.sp),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '大表姐就把我经常去故宫的几条路线和大家分享一下，经过我多年用脚步丈量故宫的经验，这一条真的还不错：',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: 17.sp),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.only(bottom: 15.h),
                        child: ReadMoreText(
                          '【高能预警】浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时浏览路线用时约4小时',
                          trimLines: 1,
                          trimMode: TrimMode.Line,
                          trimExpandedText: '展开',
                          trimCollapsedText: '收起',
                          moreStyle: StylesUtils.customTextStyle(
                            color: ColorsUtils.color3478,
                            fontSize: 17.sp,
                          ),
                          lessStyle: StylesUtils.customTextStyle(
                            color: ColorsUtils.color3478,
                            fontSize: 17.sp,
                          ),
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: 17.sp),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.only(bottom: 10.h),
                        child: Text(
                          '2023-11-20 发布',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999, fontSize: 13.sp),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.only(bottom: 25.h),
                        child: Text(
                          '来自北京',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999, fontSize: 13.sp),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(bottom: 20.h),
                        child: Column(
                          children: [
                            Container(
                              height: 130.h,
                              padding: EdgeInsets.only(top: 15.h, bottom: 15.h, left: 10.w),
                              margin: EdgeInsets.only(bottom: 15.h),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(8.w),
                                  border: Border.all(
                                      color: ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.colorF2f2)),
                                  color: Colors.white),
                              child: Stack(
                                children: [
                                  Row(
                                    children: [
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(10.w),
                                        child: ToolsUtils.image('result.png',
                                            width: 100.w, height: 100.h),
                                      ),
                                      Expanded(
                                          child: Container(
                                        padding: EdgeInsets.only(left: 10.w),
                                        child: Column(
                                          children: [
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '故宫博物馆',
                                                style: StylesUtils.customTextStyle(
                                                    fontSize: 16.sp, color: ColorsUtils.color3333),
                                              ),
                                            ),
                                            Container(
                                                padding: EdgeInsets.symmetric(vertical: 8.h),
                                                alignment: Alignment.centerLeft,
                                                child: Container(
                                                  alignment: Alignment.center,
                                                  constraints: BoxConstraints.expand(
                                                      width: 24.w, height: 18.h),
                                                  decoration: BoxDecoration(
                                                      color: ColorsUtils.parseColorFromHexString(
                                                          ColorsUtils.colorF2f2),
                                                      borderRadius: BorderRadius.circular(3.w)),
                                                  child: Text(
                                                    '5A',
                                                    style: StylesUtils.customTextStyle(
                                                        fontSize: 12.sp,
                                                        color: ColorsUtils.color6666),
                                                  ),
                                                )),
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              padding: EdgeInsets.only(bottom: 8.h),
                                              child: Wrap(
                                                spacing: 8.w,
                                                children: [
                                                  Text(
                                                    '4.8分',
                                                    style: StylesUtils.customTextStyle(
                                                        fontSize: 16.sp,
                                                        color: ColorsUtils.color3478,
                                                        fontWeight: FontWeight.w700),
                                                  ),
                                                  Text(
                                                    '137532人评价',
                                                    style: StylesUtils.customTextStyle(
                                                        fontSize: 12.sp,
                                                        color: ColorsUtils.color7979),
                                                  )
                                                ],
                                              ),
                                            ),
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '北京市东城区长安街 (天安门和正阳…',
                                                style: StylesUtils.customTextStyle(
                                                    fontSize: 12.sp, color: ColorsUtils.color7979),
                                                maxLines: 1,
                                                overflow: TextOverflow.ellipsis,
                                              ),
                                            )
                                          ],
                                        ),
                                      ))
                                    ],
                                  )
                                ],
                              ),
                            ),
                            Container(
                              height: 130.h,
                              padding: EdgeInsets.only(top: 15.h, bottom: 15.h, left: 10.w),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(8.w),
                                  border: Border.all(
                                      color: ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.colorF2f2)),
                                  color: Colors.white),
                              child: Stack(
                                children: [
                                  Row(
                                    children: [
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(10.w),
                                        child: ToolsUtils.image('result.png',
                                            width: 100.w, height: 100.h),
                                      ),
                                      Expanded(
                                          child: Container(
                                        padding: EdgeInsets.only(left: 10.w),
                                        child: Column(
                                          children: [
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '故宫博物馆',
                                                style: StylesUtils.customTextStyle(
                                                    fontSize: 16.sp, color: ColorsUtils.color3333),
                                              ),
                                            ),
                                            Container(
                                                padding: EdgeInsets.symmetric(vertical: 8.h),
                                                alignment: Alignment.centerLeft,
                                                child: Container(
                                                  alignment: Alignment.center,
                                                  constraints: BoxConstraints.expand(
                                                      width: 24.w, height: 18.h),
                                                  decoration: BoxDecoration(
                                                      color: ColorsUtils.parseColorFromHexString(
                                                          ColorsUtils.colorF2f2),
                                                      borderRadius: BorderRadius.circular(3.w)),
                                                  child: Text(
                                                    '5A',
                                                    style: StylesUtils.customTextStyle(
                                                        fontSize: 12.sp,
                                                        color: ColorsUtils.color6666),
                                                  ),
                                                )),
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              padding: EdgeInsets.only(bottom: 8.h),
                                              child: Wrap(
                                                spacing: 8.w,
                                                children: [
                                                  Text(
                                                    '4.8分',
                                                    style: StylesUtils.customTextStyle(
                                                        fontSize: 16.sp,
                                                        color: ColorsUtils.color3478,
                                                        fontWeight: FontWeight.w700),
                                                  ),
                                                  Text(
                                                    '137532人评价',
                                                    style: StylesUtils.customTextStyle(
                                                        fontSize: 12.sp,
                                                        color: ColorsUtils.color7979),
                                                  )
                                                ],
                                              ),
                                            ),
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '北京市东城区长安街 (天安门和正阳…',
                                                style: StylesUtils.customTextStyle(
                                                    fontSize: 12.sp, color: ColorsUtils.color7979),
                                                maxLines: 1,
                                                overflow: TextOverflow.ellipsis,
                                              ),
                                            )
                                          ],
                                        ),
                                      ))
                                    ],
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                      Container(
                          alignment: Alignment.centerLeft,
                          height: 40,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Expanded(
                                  child: Container(
                                alignment: Alignment.centerLeft,
                                child: Stack(
                                  children: [
                                    ...controller.avatars
                                        .asMap()
                                        .map((index, url) => MapEntry(
                                            index,
                                            Positioned(
                                              top: 0,
                                              left: getLeftX(index),
                                              bottom: 0,
                                              child: CircleAvatar(
                                                radius: 20,
                                                backgroundImage: NetworkImage(url),
                                              ),
                                            )))
                                        .values
                                        .toList()
                                  ],
                                ),
                              )),
                              Container(
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: ToolsUtils.assetImageSvg('u1249.svg',
                                          width: 20.w, height: 18.h),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: ' 20',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: 15.sp, color: ColorsUtils.color3333))
                                ])),
                              ),
                            ],
                          )),
                      Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.only(bottom: 15.h, top: 15.h),
                        child: Text(
                          '评论',
                          style: StylesUtils.customTextStyle(
                              fontSize: 16.sp, color: ColorsUtils.color3333),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(bottom: 20.h),
                        child: Column(
                          children: [
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Container(
                                  width: 40,
                                  alignment: Alignment.topLeft,
                                  child: const CircleAvatar(
                                    radius: 20,
                                    backgroundImage: NetworkImage(
                                        'https://img2.baidu.com/it/u=359052501,4040079240&fm=253&app=53&size=f60,60&n=0&g=0n&f=jpeg&fmt=auto?sec=1707901039&t=7b42bd7aa6cf6e0921dfc7fb3369dbc6'),
                                  ),
                                ),
                                Expanded(
                                    child: Container(
                                        padding: const EdgeInsets.only(left: 10),
                                        child: Column(
                                          children: [
                                            Row(
                                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                              children: [
                                                Text(
                                                  '五行缺德',
                                                  style: StylesUtils.customTextStyle(
                                                      fontSize: 15.sp,
                                                      color: ColorsUtils.color3333),
                                                ),
                                                Text.rich(TextSpan(children: [
                                                  WidgetSpan(
                                                      child: ToolsUtils.assetImageSvg('u791.svg',
                                                          width: 16.w, height: 16.h))
                                                ]))
                                              ],
                                            ),
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              margin: EdgeInsets.only(top: 8.h, bottom: 16.h),
                                              child: Text(
                                                '2023-11-25  来自北京',
                                                style: StylesUtils.customTextStyle(
                                                    fontSize: 12.sp, color: ColorsUtils.color9999),
                                              ),
                                            ),
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '线路设计的非常好，谢谢分享',
                                                style: StylesUtils.customTextStyle(
                                                    color: ColorsUtils.color3333, fontSize: 15.sp),
                                              ),
                                            ),
                                          ],
                                        )))
                              ],
                            )
                          ],
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(bottom: 20.h),
                        child: Column(
                          children: [
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Container(
                                  width: 40,
                                  alignment: Alignment.topLeft,
                                  child: const CircleAvatar(
                                    radius: 20,
                                    backgroundImage: NetworkImage(
                                        'https://img2.baidu.com/it/u=359052501,4040079240&fm=253&app=53&size=f60,60&n=0&g=0n&f=jpeg&fmt=auto?sec=1707901039&t=7b42bd7aa6cf6e0921dfc7fb3369dbc6'),
                                  ),
                                ),
                                Expanded(
                                    child: Container(
                                        padding: const EdgeInsets.only(left: 10),
                                        child: Column(
                                          children: [
                                            Row(
                                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                              children: [
                                                Text(
                                                  '五行缺德',
                                                  style: StylesUtils.customTextStyle(
                                                      fontSize: 15.sp,
                                                      color: ColorsUtils.color3333),
                                                ),
                                                Text.rich(TextSpan(children: [
                                                  WidgetSpan(
                                                      child: ToolsUtils.assetImageSvg('u791.svg',
                                                          width: 16.w, height: 16.h)),
                                                  TextSpan(
                                                      text: ' 24',
                                                      style: StylesUtils.customTextStyle(
                                                          fontSize: 12.sp,
                                                          color: ColorsUtils.color6666))
                                                ]))
                                              ],
                                            ),
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              margin: EdgeInsets.only(top: 8.h, bottom: 16.h),
                                              child: Text(
                                                '2023-11-25  来自北京',
                                                style: StylesUtils.customTextStyle(
                                                    fontSize: 12.sp, color: ColorsUtils.color9999),
                                              ),
                                            ),
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '线路设计的非常好，谢谢分享',
                                                style: StylesUtils.customTextStyle(
                                                    color: ColorsUtils.color3333, fontSize: 15.sp),
                                              ),
                                            ),
                                          ],
                                        )))
                              ],
                            )
                          ],
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 50, bottom: 40),
                        child: Text(
                          '查看全部5条评论＞',
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color6799),
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
          bottomNavigationBar: SafeArea(
            bottom: true,
            child: Container(
              padding: EdgeInsets.only(top: 10.h, left: 10.w, right: 10.w),
              height: 70.h,
              color: Colors.white,
              alignment: Alignment.topLeft,
              child: Row(
                children: [
                  Container(
                      width: 165.w,
                      height: 40.h,
                      decoration: BoxDecoration(
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF5f5),
                          borderRadius: BorderRadius.circular(20.w)),
                      padding: EdgeInsets.symmetric(horizontal: 20.w),
                      alignment: Alignment.centerLeft,
                      child: TextButton(
                        onPressed: () {
                          Get.toNamed(RoutePath.comment);
                        },
                        child: Text.rich(TextSpan(children: [
                          WidgetSpan(
                              child: ToolsUtils.assetImageSvg('u775.svg', width: 15, height: 15.h),
                              alignment: PlaceholderAlignment.middle),
                          TextSpan(
                              text: '写评论…',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color9999, fontSize: 13.sp))
                        ])),
                      )),
                  Expanded(
                      child: Container(
                    height: 40.h,
                    alignment: Alignment.centerLeft,
                    child: Row(
                      children: [
                        Expanded(
                            child: Column(
                          children: [
                            Center(
                              child:
                                  ToolsUtils.assetImageSvg('u1230.svg', width: 21.w, height: 21.h),
                            ),
                            Container(
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(top: 6.h),
                              child: Text(
                                '20',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color3333, fontSize: 12.sp),
                              ),
                            )
                          ],
                        )),
                        Expanded(
                            child: InkWell(
                          onTap: () {
                            // openShowModalBottomSheet(context);
                            ToolsUtils.openAllComment(context,
                                controller: controller.editingController,
                                onSubmitted: (String content) {
                              Get.log('content = $context');
                            });
                          },
                          child: Column(
                            children: [
                              Center(
                                child: ToolsUtils.assetImageSvg('u1237.svg',
                                    width: 21.w, height: 21.h),
                              ),
                              Container(
                                alignment: Alignment.center,
                                margin: EdgeInsets.only(top: 6.h),
                                child: Text(
                                  '5',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333, fontSize: 12.sp),
                                ),
                              )
                            ],
                          ),
                        )),
                        Expanded(
                            child: InkWell(
                          onTap: () {
                            ToolsUtils.openShare(context);
                          },
                          child: Column(
                            children: [
                              Center(
                                child: ToolsUtils.assetImageSvg('u1234.svg',
                                    width: 21.w, height: 21.h),
                              ),
                              Container(
                                alignment: Alignment.center,
                                margin: EdgeInsets.only(top: 6.h),
                                child: Text(
                                  '分享',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333, fontSize: 12.sp),
                                ),
                              )
                            ],
                          ),
                        )),
                        Expanded(
                            child: Column(
                          children: [
                            Center(
                              child:
                                  ToolsUtils.assetImageSvg('u1240.svg', width: 21.w, height: 21.h),
                            ),
                            Container(
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(top: 6.h),
                              child: Text(
                                '收藏',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color3333, fontSize: 12.sp),
                              ),
                            )
                          ],
                        ))
                      ],
                    ),
                  ))
                ],
              ),
            ),
          ),
        ));
  }

  void openShowModalBottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (_) {
          return Obx(() {
            return Container(
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10.h), topRight: Radius.circular(10.h))),
              child: Column(
                children: [
                  SizedBox(
                    height: 50,
                    child: Stack(
                      children: [
                        Center(
                          child: Text(
                            '全部评论',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color3333, fontSize: 16.sp),
                          ),
                        ),
                        Positioned(
                            width: 50,
                            top: 0,
                            right: 0,
                            bottom: 0,
                            child: Center(
                              child: IconButton(
                                  onPressed: () {
                                    Navigator.of(context).pop();
                                  },
                                  icon: Icon(
                                    Icons.close,
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                                    size: 20,
                                  )),
                            ))
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 300,
                    child: ListView(
                      padding: EdgeInsets.symmetric(horizontal: 15.w),
                      children: [
                        Container(
                          margin: EdgeInsets.only(bottom: 15.h),
                          child: Column(
                            children: [
                              SizedBox(
                                height: 40.h,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    CircleAvatar(
                                      radius: 20.w,
                                      backgroundColor: Colors.transparent,
                                      backgroundImage: const NetworkImage(
                                        'https://img1.baidu.com/it/u=2230340413,2442217261&fm=253&app=53&size=f60,60&n=0&g=0n&f=jpeg&fmt=auto?sec=1706863521&t=c2d07c1ca9bb49ddf5e55884d5ab3de7',
                                      ),
                                    ),
                                    Expanded(
                                        child: Column(
                                      children: [
                                        Container(
                                          height: 20.h,
                                          alignment: Alignment.centerLeft,
                                          child: Text(
                                            '五行缺钱',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color3333, fontSize: 15.sp),
                                          ),
                                        ),
                                        Container(
                                          alignment: Alignment.centerLeft,
                                          margin: EdgeInsets.only(top: 5.h),
                                          child: Text(
                                            '2023-11-25  来自北京',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color9999, fontSize: 12.sp),
                                          ),
                                        )
                                      ],
                                    )),
                                    Align(
                                      alignment: Alignment.topRight,
                                      child: ToolsUtils.assetImageSvg('u791.svg',
                                          width: 16.sp, height: 16.sp),
                                    )
                                  ],
                                ),
                              ),
                              Container(
                                margin: EdgeInsets.symmetric(vertical: 10.h),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '去故宫建议和贴士： 避开周末，人会少很多 故宫餐厅就餐会排队，建议早点去 如果第一次去，走中轴线游览 如果第二次去，游览故宫东侧延禧宫珍宝',
                                  maxLines: 3,
                                  overflow: TextOverflow.ellipsis,
                                  style: StylesUtils.customTextStyle(
                                      fontSize: 15.sp,
                                      color: ColorsUtils.color3333,
                                      lineHeight: 1.5.h),
                                ),
                              ),
                              StaggeredGrid.count(
                                crossAxisCount: 3,
                                crossAxisSpacing: 8.w,
                                mainAxisSpacing: 8.w,
                                children: [
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(8.w),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img1.baidu.com/it/u=4122970627,3800550945&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
                                      alignment: Alignment.topLeft,
                                      fit: BoxFit.cover,
                                      height: 110.h,
                                      placeholder: (context, url) =>
                                          const CircularProgressIndicator(),
                                    ),
                                  ),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(8.w),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img1.baidu.com/it/u=2488364572,2759096292&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
                                      alignment: Alignment.topLeft,
                                      fit: BoxFit.cover,
                                      height: 110.h,
                                      placeholder: (context, url) =>
                                          const CircularProgressIndicator(),
                                    ),
                                  ),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(8.w),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img0.baidu.com/it/u=3010233418,2224126101&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=281',
                                      alignment: Alignment.topLeft,
                                      fit: BoxFit.cover,
                                      height: 110.h,
                                      placeholder: (context, url) =>
                                          const CircularProgressIndicator(),
                                    ),
                                  ),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(8.w),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img0.baidu.com/it/u=3368221683,1026380209&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
                                      alignment: Alignment.topLeft,
                                      fit: BoxFit.cover,
                                      height: 110.h,
                                      placeholder: (context, url) =>
                                          const CircularProgressIndicator(),
                                    ),
                                  ),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(8.w),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img2.baidu.com/it/u=2619871711,1635215366&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                                      alignment: Alignment.topLeft,
                                      fit: BoxFit.cover,
                                      height: 110.h,
                                      placeholder: (context, url) =>
                                          const CircularProgressIndicator(),
                                    ),
                                  ),
                                ],
                              )
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(bottom: 15.h),
                          child: Column(
                            children: [
                              SizedBox(
                                height: 40.h,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    CircleAvatar(
                                      radius: 20.w,
                                      backgroundColor: Colors.transparent,
                                      backgroundImage: const NetworkImage(
                                        'https://img0.baidu.com/it/u=2947341353,265385944&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1704387600&t=86d9882d1eb9832c3b3e92c518cf95cf',
                                      ),
                                    ),
                                    Expanded(
                                        child: Column(
                                      children: [
                                        Container(
                                          height: 20.h,
                                          alignment: Alignment.centerLeft,
                                          child: Text(
                                            'M****0',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color3333, fontSize: 15.sp),
                                          ),
                                        ),
                                        Container(
                                          alignment: Alignment.centerLeft,
                                          margin: EdgeInsets.only(top: 5.h),
                                          child: Text(
                                            '2023-10-25  来自广东',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color9999, fontSize: 12.sp),
                                          ),
                                        )
                                      ],
                                    )),
                                    Align(
                                        alignment: Alignment.topRight,
                                        child: Text.rich(TextSpan(children: [
                                          WidgetSpan(
                                              child: ToolsUtils.assetImageSvg('u791.svg',
                                                  width: 16.sp, height: 16.sp),
                                              alignment: PlaceholderAlignment.middle),
                                          TextSpan(
                                              text: '32',
                                              style: StylesUtils.customTextStyle(
                                                  color: ColorsUtils.color6666, fontSize: 12.sp))
                                        ])))
                                  ],
                                ),
                              ),
                              Container(
                                margin: EdgeInsets.symmetric(vertical: 10.h),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '去故宫建议和贴士： 避开周末，人会少很多 故宫餐厅就餐会排队，建议早点去 如果第一次去，走中轴线游览 如果第二次去，游览故宫东侧延禧宫珍宝',
                                  maxLines: 3,
                                  overflow: TextOverflow.ellipsis,
                                  style: StylesUtils.customTextStyle(
                                      fontSize: 15.sp,
                                      color: ColorsUtils.color3333,
                                      lineHeight: 1.5.h),
                                ),
                              ),
                              StaggeredGrid.count(
                                crossAxisCount: 3,
                                crossAxisSpacing: 8.w,
                                mainAxisSpacing: 8.w,
                                children: [
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(8.w),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img1.baidu.com/it/u=4122970627,3800550945&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
                                      alignment: Alignment.topLeft,
                                      fit: BoxFit.cover,
                                      height: 110.h,
                                      placeholder: (context, url) =>
                                          const CircularProgressIndicator(),
                                    ),
                                  ),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(8.w),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img1.baidu.com/it/u=2488364572,2759096292&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
                                      alignment: Alignment.topLeft,
                                      fit: BoxFit.cover,
                                      height: 110.h,
                                      placeholder: (context, url) =>
                                          const CircularProgressIndicator(),
                                    ),
                                  ),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(8.w),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img0.baidu.com/it/u=3010233418,2224126101&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=281',
                                      alignment: Alignment.topLeft,
                                      fit: BoxFit.cover,
                                      height: 110.h,
                                      placeholder: (context, url) =>
                                          const CircularProgressIndicator(),
                                    ),
                                  ),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(8.w),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img0.baidu.com/it/u=3368221683,1026380209&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
                                      alignment: Alignment.topLeft,
                                      fit: BoxFit.cover,
                                      height: 110.h,
                                      placeholder: (context, url) =>
                                          const CircularProgressIndicator(),
                                    ),
                                  ),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(8.w),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img2.baidu.com/it/u=2619871711,1635215366&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                                      alignment: Alignment.topLeft,
                                      fit: BoxFit.cover,
                                      height: 110.h,
                                      placeholder: (context, url) =>
                                          const CircularProgressIndicator(),
                                    ),
                                  ),
                                ],
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: 60,
                    alignment: Alignment.center,
                    child: FractionallySizedBox(
                      heightFactor: 0.8,
                      widthFactor: 0.8,
                      child: TextField(
                        controller: ToolsUtils.editingController(controller.search.value),
                        cursorWidth: 2.0,
                        cursorRadius: const Radius.circular(2),
                        cursorColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                        style: StylesUtils.customTextStyle(
                            fontSize: 15.sp, color: ColorsUtils.color3333),
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            focusedBorder: InputBorder.none,
                            hintText: '说点什么吧…',
                            contentPadding: EdgeInsets.symmetric(vertical: 15.h),
                            isCollapsed: true,
                            isDense: true,
                            hintStyle: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999,
                            ),
                            prefix: ToolsUtils.assetImageSvg('u775.svg', width: 15, height: 15.h),
                            prefixIconConstraints: BoxConstraints.expand(width: 15.w, height: 15.h),
                            constraints: BoxConstraints(maxHeight: 38.h),
                            fillColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF5f5)),
                        onChanged: (String keyword) {
                          controller.search.value = keyword;
                        },
                      ),
                    ),
                  ),
                  SizedBox(height: controller.bottom.value),
                ],
              ),
            );
          });
        },
        elevation: 0,
        backgroundColor: Colors.transparent,
        barrierColor: Colors.black54,
        useSafeArea: true,
        isScrollControlled: false,
        anchorPoint: Offset(0, controller.bottom.value),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10.h), topRight: Radius.circular(10.h))));
  }

  double getLeftX(int index) {
    if (index > 0) {
      return index * 40 - index * 5.0;
    }
    return 0;
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  double _virtualHeight = 0;
  final double _virtualBoxBottomContentHeight = 160;
  final _sheetPadding = const EdgeInsets.all(20);

  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    // 此处我们用键盘高度减去虚拟框（virtualBox）下面内容的高度，在减去sheet的下方内边距。
    // 即得到虚拟框的高度
    final transDelta = MediaQuery.of(context).viewInsets.bottom -
        _virtualBoxBottomContentHeight -
        _sheetPadding.bottom;
    _virtualHeight = transDelta <= 0 ? 0 : transDelta;
    setState(() {});

    super.didChangeMetrics();
  }

  void _show() {
    showModalBottomSheet(
        context: context,
        elevation: 0,
        backgroundColor: Colors.transparent,
        barrierColor: Colors.black.withOpacity(0.25),
        isScrollControlled: true,
        constraints: BoxConstraints(
          maxHeight: MediaQuery.of(context).size.height - MediaQuery.of(context).viewPadding.top,
        ),
        builder: (ctx) {
          return Container(
            padding: _sheetPadding,
            decoration: const BoxDecoration(
              borderRadius:
                  BorderRadius.only(topLeft: Radius.circular(16), topRight: Radius.circular(16)),
              color: Colors.white,
            ),
            child: Column(
              children: [
                // 此处加了一个ListView，用于演示较为复杂的场景
                Expanded(
                    child:
                        ListView.builder(itemBuilder: (ctx, i) => Text('item_$i'), itemCount: 50)),
                Container(
                  height: 160,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8), color: Colors.lightGreen),
                ),
                const TextField(),
                const SizedBox(height: 16),
                // 虚拟的高度，用户填充被键盘遮挡的部分
                SizedBox(height: _virtualHeight),
                Container(
                  decoration:
                      BoxDecoration(borderRadius: BorderRadius.circular(8), color: Colors.teal),
                  height: _virtualBoxBottomContentHeight,
                )
              ],
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      resizeToAvoidBottomInset: false,
      body: Center(
        child: ElevatedButton(
          onPressed: _show,
          child: const Text('显示底部弹窗'),
        ),
      ),
    );
  }
}
